<ul class="nav nav-tabs" id="contactTabs">
  <li><a href="#emailAddresses" data-toggle="tab">Email Addresses</a></li>
  <li><a href="#phone" data-toggle="tab">Phone Numbers</a></li>
  <li><a href="#address" data-toggle="tab">Addresses</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane fade" id="emailAddresses">
    <%= render :partial => 'email_address' %>
  </div>
  <div class="tab-pane fade" id="phone">
    <%= render :partial => 'phone_number' %>
  </div>
  <div class="tab-pane fade" id="address">
    <%= render :partial => 'address' %>
  </div>
</div>

<script type="text/javascript">
    jQuery(function () {
        jQuery('#contactTabs a:first').tab('show')
    });
</script>